import React, {useState} from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

import { Layout, Row, Col, Button } from 'antd';
import axios from '@src/lib/axios';

import Menus from '@src/components/menu';
import Head from '@src/components/Head';
import routes from '@src/routes';
import './App.css';

const { Sider, Content, Header } = Layout;

import {
    LoadingOutlined,
    PlusOutlined,
    CloseCircleOutlined,
    EyeInvisibleOutlined,
    MinusSquareOutlined,
    BellOutlined,
    EyeOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined
} from "@ant-design/icons";

//const ApiContext = React.createContext(axios);

function RouterMap({ route }) {
    return route.map(({ component: Component, children, ...rest }, i) => (
        children?
            <Route
                { ...rest }
                key={i}
                render={ () =>
                    <Component>
                        <RouterMap route={children}/>
                    </Component>
                }
            /> :
            <Route
                { ...rest }
                key={i}
                component={Component}
            />
    ))
}

function App() {
    const [collapsed, setCollapsed] = useState(false);

    return (
        <div className="App" style={{height: '100%'}}>
            <Router>

                <Layout>
                    <Menus collapsed={collapsed} />
                    <Layout>
                        <Head collapsed={collapsed} setCollapsed={setCollapsed} />
                        <Content className="site-layout-background"
                        >
                            <Switch>
                                <Redirect exact from="/" to="/hotel/list"/>
                                <RouterMap route={routes}/>
                                {
                                    !localStorage.getItem('_token') ?
                                        <Redirect from="/" to="/login"/> : null
                                }
                            </Switch>
                        </Content>
                    </Layout>
                </Layout>
            </Router>
        </div>
    );
}

export default App;
